<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>河北农业大学图书馆</title>
		
		<!-- Bootstrap依赖的样式和脚本 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- <link rel="stylesheet" href="css/navigator_color.css"> -->
		<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.background{
				width: 100%; 
				height: 100%; 
				z-index: -10;
				position: absolute; 
				/* background: url(img/background.jpeg) no-repeat center ;
				background-size: 100% 100%; */
				/* background-attachment: scroll; */

			}
			/* 导航悬停出现下拉菜单 */
			.nav > li:hover .dropdown-menu { 
				display: block; 
			}
			#myLibrary::before{
				content: "";
				display: inline-block;
				width: 18px;
				height: 18px;
				background: url(img/user.png) no-repeat center;
				background-size: 100%;
				vertical-align: top;
			}
			
			input::-webkit-input-placeholder{
				color: #ddd;
				font-size: 16px;
			}
		</style>
		<script type="text/javascript">
			function logo(){
				var logo = $("#logo");
				location = "index.html";
			}
		</script>
	</head>
	<body>
		<!-- 背景图 -->
		<div id="background">
			<img id="bgd" class="background" src="img/background.jpeg" style=""  alt="">
		</div>
		<!-- 索引导航 -->
		<div id="mask" style="width: 100%; height: 100%; z-index: 10; background: rgba(0,0,0,0.6);">
			<div class="container">
				<!-- 导航 -->
				<div class="row" style="margin-top: 40px; font-size: 14px;">
					<!-- 图书馆Logo -->
					<div id="logo" class="col-lg-5" onclick="logo()">
						<img src="img/schoolBadge.png" style="height: 60px; z-index: 10;">
						<img src="img/library.png" style="z-index: 10; width: 78%; height: 40px; margin: 10px 10px;">
					</div>
					<!-- 首页导航 -->
					<div class="col-lg-7">
						<nav class="navbar navbar-default">
							<div class="navbar-header">
							      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							        <span class="sr-only">Toggle navigation</span>
							        <span class="icon-bar"></span>
							        <span class="icon-bar"></span>
							        <span class="icon-bar"></span>
							      </button>
							</div>
							<ul class="nav navbar-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<li role="presentation" class="active dropdown">
									<a id="dropActive" class="dropdown-toggle" data-toggle="dropdown" href="#">馆藏资源</a>
									<ul class="dropdown-menu" aria-labelledby="dropActive">
										<li><a href="#">图书/期刊</a></li>
										<li><a href="#">学位论文</a></li>
										<li><a href="#">随书光盘</a></li>
										<li><a href="#">古籍</a></li>
										<li><a href="#">工具与软件</a></li>
										<li><a href="#">视频/音频</a></li>
									</ul>
								</li>
								
								<li role="presentation" class="dropdown">
									<a id="drop1" class="dropdown-toggle" data-toggle="dropdown" href="#">电子资源</a>
									<ul class="dropdown-menu" aria-labelledby="drop1">
										<li><a href="#">中文数据库</a></li>
										<li><a href="#">外文数据库</a></li>
										<li><a href="#">电子图书</a></li>
										<li><a href="#">自建数据库</a></li>
										<li><a href="#">共建数据库</a></li>
										<li><a href="#">试用数据库</a></li>
									</ul>
								</li>
								<li role="presentation" class="dropdown">
									<a id="drop2" class="dropdown-toggle" data-toggle="dropdown" href="#">借阅系统</a>
									<ul class="dropdown-menu" aria-labelledby="drop2">
										<li><a href="#">借阅规则</a></li>
										<li><a href="#">馆藏检索与使用</a></li>
										<li><a href="#">借阅办理</a></li>
										<li><a href="#">馆际互借&文献传递</a></li>
										<li><a href="#">阅读推荐</a></li>
									</ul>
								</li>
								<li role="presentation" class="dropdown">
									<a id="drop4" class="dropdown-toggle" data-toggle="dropdown" href="#">研究支持</a>
									<ul class="dropdown-menu" aria-labelledby="drop4">
										<li><a href="#">教学与培训</a></li>
										<li><a href="#">科技查新</a></li>
										<li><a href="#">学科服务</a></li>
										<li><a href="#">学科分析与报告</a></li>
										<li><a href="#">数据服务</a></li>
										<li><a href="#">知识产权服务</a></li>
									</ul>
								</li>
								<li role="presentation" class="dropdown">
									<a id="drop5" class="dropdown-toggle" data-toggle="dropdown" href="#">学术交流</a>
									<ul class="dropdown-menu" aria-labelledby="drop5">
										<li><a href="#">机构知识库</a></li>
										<li><a href="#">移动图书馆</a></li>
										<li><a href="#">CASHL文献传递</a></li>
										<li><a href="#">国家科技文献中心</a></li>
										<li><a href="#">CALIS农学中心</a></li>
									</ul>
								</li>
								<li role="presentation" class="dropdown">
									<a id="drop6" class="dropdown-toggle" data-toggle="dropdown" href="#">关于</a>
									<ul class="dropdown-menu" aria-labelledby="drop6">
										<li class="dropdown1"><a href="#">关于本馆</a></li>
										<li><a href="#">新鲜动态</a></li>
										<li><a href="#">科学研究</a></li>
										<li><a href="#">读者荐书</a></li>
										<li><a href="#">图书馆微信</a></li>
										<li><a href="#">馆长信箱</a></li>
									</ul>
								</li>
								<li role="presentation">
									<a id="myLibrary" href="controlIndex.html">我的图书馆</a>
								</li>
							</ul>
							
						</nav>
					</div>
				</div>
				
				<!-- 搜索引擎 -->
				<div class="row" style="height: 50px;">
					<div class="col-lg-12">
					    <div class="input-group input-group-lg">
							<div class="input-group-btn">
								<button type="button" class="btn btn-lg dropdown-toggle" data-toggle="dropdown" style="background-color: #F00; color: #fff; ">&nbsp;&nbsp;搜索类型 &nbsp;<span class="caret"></span></button>
								<ul class="dropdown-menu">
								  <li><a href="#">书目名称</a></li>
								  <li><a href="#">作者名称</a></li>
								  <li role="separator" class="divider"></li>
								  <li><a href="#">出版社</a></li>
								  <li><a href="#">分类号</a></li>
								  <li><a href="#">主题词</a></li>
								</ul>
							</div>
							<input type="text" class="form-control" placeholder="搜索图书馆资源, 一搜即得" style="background: url(img/search.png) no-repeat right center #fff; background-size: 30px; background-position: 96%;">
					    </div>
					</div>
				</div><br>
				
				<div class="row">
					<div class="col-lg-6" style="">
						<div class="col-lg-12 center-block" style="background-color: #FFF; border-radius: 20px;"> 
							<div class="panel panel-default" style="margin-top: 20px; ">
								<div class="panel-heading">
									<h3 class="panel-title">馆藏资源</h3>
								</div>
								<div class="panel-body">
									<ul class="nav navbar-nav" >
										<li><a href="#">图书/期刊</a></li>
										<li><a href="#">学位论文</a></li>
										<li><a href="#">随书光盘</a></li>
										<li><a href="#">古籍</a></li>
										<li><a href="#">工具与软件</a></li>
										<li><a href="#">随书光盘</a></li>
										<li><a href="#">视频/音频</a></li>
										<li><a href="#">统计数据/研究数据</a></li>
										<li><a href="#">报纸/档案</a></li>

									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6" style="margin: 0px auto; border-radius: 20px;">
						<div class="col-lg-12 center-block" style="margin: 0px auto; background-color: #FFF; border-radius: 20px;">
							<div class="panel panel-default" style="margin-top: 20px; ">
								<div class="panel-heading">
									<h3 class="panel-title">特色资源</h3>
								</div>
								<div class="panel-body">
									<ul class="nav navbar-nav" >
										<li><a href="#">专题讲座</a></li>
										<li><a href="#">古文献资源库</a></li>
										<li><a href="#">晚清民国文献</a></li>
										<li><a href="#">博后研究报告</a></li>
										<li><a href="#">名人藏书</a></li>
										<li><a href="#">数字特藏</a></li>
										<li><a href="#">西文特藏</a></li>
										<li><a href="#">农业百科</a></li>
										<li><a href="#">智慧产业</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div><br>
				
				<div class="row">
					<div class="col-lg-6" style="">
						<div class="col-lg-12 center-block" style="background-color: #FFF; border-radius: 20px;"> 
							<div class="panel panel-default" style="margin-top: 20px; ">
								<div class="panel-heading">
									<h3 class="panel-title">最新/精选资源</h3>
								</div>
								<div class="panel-body">
									<ul class="nav navbar-nav" >
										<li><a href="#">试用/最新数据库</a></li>
										<li><a href="#">新书发表</a></li>
										<li><a href="#">获奖图书</a></li>
										<li><a href="#">晚清民国专题</a></li>
										<li><a href="#">区域与国别专题</a></li>
										<li><a href="#">学位论文</a></li>
										<li><a href="#">教学参考书</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6" style="margin: 0px auto; border-radius: 20px;">
						<div class="col-lg-12 center-block" style="margin: 0px auto; background-color: #FFF; border-radius: 20px;">
							<div class="panel panel-default" style="margin-top: 20px; ">
								<div class="panel-heading">
									<h3 class="panel-title">热门服务</h3>
								</div>
								<div class="panel-body">
									<ul class="nav navbar-nav" >
										<li><a href="#">空间布局</a></li>
										<li><a href="#">图书借阅</a></li>
										<li><a href="#">阅读推广</a></li>
										<li><a href="#">设备设施</a></li>
										<li><a href="#">提升信息素养</a></li>
										<li><a href="#">常用软件与培训</a></li>
										<li><a href="#">数字加工服务</a></li>
										<li><a href="#">学科报告分析</a></li>
										<li><a href="#">专利申请</a></li>
										<!-- <li><a href="#">教学与培训</a></li> -->
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div><br>
						
				<div class="row" style="height: 500px; width: 100%; ">
					
				</div>	
			</div>
		</div>
		<script type="text/javascript">
			
			
			function bgdHeight(){
				var mask = document.getElementById('mask');
				var background = document.getElementById('bgd');
				var height = mask.clientHeight;
				background.style.height = height+"px";
				// alert(height);
			}
			
			var timer = setInterval("bgdHeight()", 500);
			// 
		</script>
		
	</body>
</html>

